<!-- ohlc k线图 -->
<script setup>
import row from './row.json'

let option = {}

// macd 可移动曲线 就是说 5天内数据的平均值[12，16，13，20，31] mac5 = 92/5 = 18.4 
// data 数据 n 要最近几天的平均数
// ma5 至少需要 5天的数据 没有 前四天⬆是空的
function macd(data, n) {
  let result = []
  let sum = 0
  console.log(data.map((item, index) => {
    let close = parseFloat(item.split(',')[4]);
    sum += close
    if (index < n) {
      return ' '
    } else {
      console.log(sum, 'sum');
      console.log(parseFloat(data[index - n].split(',')[4]), 'parseFloat(data[index - n].split(', ')[4])');

      sum -= parseFloat(data[index - n].split(',')[4]);
      return (sum / n).toFixed(2)
    }
  }), 'mac');

  return data.map((item, index) => {
    let close = parseFloat(item.split(',')[4]);
    sum += close
    if (index < n) {
      return ''
    } else {
      console.log(data[index - n].split(',')[4]);

      sum -= parseFloat(data[index - n].split(',')[4]);
      console.log(sum, 'sum');

      return (sum / n).toFixed(2)
    }
  })
}

const getList = () => {
  console.log(row, "row");
  option = {
    title: {
      text: row.data.name,
      left: "50%"
    },
    // x轴
    xAxis: {
      data: row.data.klines.map(i => i.split(',')[0])
    },
    // y轴
    yAxis: {
      scale: true, // 让y轴的数据看着舒服
      splitArea: { // 斑马纹 方便识别
        show: true
      }
    },
    // 鼠标悬浮的提升
    tooltip: {
      // show: true
      trigger: 'axis', // 开启 所有区域 都显示提示框 否则只有柱子上才有提示
      axisPointer: {
        type: 'cross' // 开启鼠标悬浮 十字架 更精准的看y轴
      }
    },
    // 开启区间设置 放大缩小
    dataZoom: [
      // {
      //   show: true
      // }
      // 开启图表内部的缩放
      // {
      //   type: 'inside', // 这个设置使得图表内部可以缩放
      //   start: 0,       // 初始缩放起始位置
      //   end: 100        // 初始缩放结束位置
      // },
      {
        type: 'slider', // 这个设置为在图表下方添加一个缩放滑块
        start: 0, // 设置滑块的起点 百分比
        end: 100 // 设置滑块的终点
        // start: 95, // 设置滑块的起点 百分比
        // end: 100 // 设置滑块的终点
        // startValue: row.data.klines.length - 30, //精确调节 最后三十天的数据
        // endValue: row.data.klines.length
      }
    ],
    // 数据
    series: [
      {
        type: "candlestick",
        //  数据里面的格式 日期, 开盘价, 最高价, 最低价, 收盘价,
        // 要求的格式 open close min max
        data: row.data.klines.map(i => {
          let arr = []
          arr[0] = i.split(',')[1]
          arr[1] = i.split(',')[4]
          arr[2] = i.split(',')[3]
          arr[3] = i.split(',')[2]
          return arr
        })
      },
      // macd 5 10 60 120
      {
        name: 'ma5',
        type: 'line',
        smooth: true,// 平滑处理
        data: macd(row.data.klines, 5),
        lineStyle: {
          opacity: 0.5
        }
      },
      {
        name: 'ma10',
        type: 'line',
        smooth: true,// 平滑处理
        data: macd(row.data.klines, 10),
        lineStyle: {
          opacity: 0.5
        }
      },
      {
        name: 'ma60',
        type: 'line',
        smooth: true,// 平滑处理
        data: macd(row.data.klines, 60),
        lineStyle: {
          opacity: 0.5
        }
      },
      {
        name: 'ma120',
        type: 'line',
        smooth: true,// 平滑处理
        data: macd(row.data.klines, 120),
        lineStyle: {
          opacity: 0.5
        }
      },
    ]
  };
}
getList()

</script>

<template>
  <div style="height: 80px;"></div>
  <main class="" style="border: 1px solid #000;">
    <appChart :option="option"></appChart>
  </main>
</template>
